<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>medicine管理</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="/plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/style.css">
    <!-- 上传图片框样式，不使用上传组件可以删除此样式 -->
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;

            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 150px;
            height: 150px;
            line-height: 150px;
            text-align: center;
        }

        .avatar {
            width: 150px;
            height: 120px;
            display: block;
        }

        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>
</head>
<body class="hold-transition">
<div id="app">
<!--    <div class="content-header">-->
<!--        <h1>管理<small>medicine管理</small></h1>-->
<!--        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">-->
<!--            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>-->
<!--            <el-breadcrumb-item>管理</el-breadcrumb-item>-->
<!--            <el-breadcrumb-item>medicine管理</el-breadcrumb-item>-->
<!--        </el-breadcrumb>-->
<!--    </div>-->
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
        <el-menu-item index="1">药品管理</el-menu-item>
        <el-menu-item index="2"><a href="/start/receipt" target="_blank">划价收费</a></el-menu-item>
    </el-menu>
    <div class="app-container">
        <div class="box">
            <div class="filter-container">
                <!--查询表单-->
                <el-form :inline="true">
                    <el-form-item label="药品名称">
                        <el-col :span="23">
                            <el-autocomplete
                                    clearable
                                    class="inline-input"
                                    v-model="searchMap.medicine_name"
                                    :fetch-suggestions="querySearch"
                                    placeholder="请输入药品名称"
                                    @select="handleSelect"
                            ></el-autocomplete>
                        </el-col>
                    </el-form-item>
                    <el-button class="dalfBut" icon="el-icon-search" @click="fetchData()">查询</el-button>
                    <el-button type="primary" class="butT" icon="el-icon-circle-plus"
                               @click="formVisible=true;pojo={};imageUrl=''">新增
                    </el-button>
                </el-form>
            </div>
            <el-table v-loading="loading"
                      element-loading-text="拼命加载中"
                      element-loading-spinner="el-icon-loading"
                      element-loading-background="rgba(0, 0, 0, 0.8)"
                    :data="tableData" border height="450" style="width: 100%" :row-class-name="tableRowClassName">
                <el-table-column prop="medicineId" label="药品编号" width="120"></el-table-column>
                <el-table-column prop="medicineName" label="药品名称" width="160"></el-table-column>
                <el-table-column prop="specification" label="药品规格" width="160"></el-table-column>
                <el-table-column label="药品图片" width="160">
                    <template slot-scope="scope">
                        <img :src="scope.row.image" width="100px" height="100px" alt="图片加载失败">
                    </template>
                </el-table-column>
                <el-table-column prop="nums" label="药品数量" width="120"></el-table-column>
                <el-table-column label="药品单价(元)" width="120">
                    <template slot-scope="scope">
                        {{scope.row.price / 100}}
                    </template>
                </el-table-column>
                <el-table-column prop="vendor" label="生产厂商" width="260"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <!--  size="mini" size="mini" -->
                        <el-button @click="edit(scope.row.medicineId)" icon="el-icon-edit" type="primary" size="small"
                                   round>修改
                        </el-button>
                        <el-button @click="dele(scope.row.medicineId)" icon="el-icon-delete-solid" type="danger"
                                   size="small" round>删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container">
                <el-pagination
                        background
                        class="pagiantion"
                        @size-change="fetchData"
                        @current-change="fetchData"
                        :current-page.sync="currentPage"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size.sync="size"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </div>
            <div class="add-form">
                <!--弹出窗口-->
                <el-dialog title="药品" :visible.sync="formVisible">
                    <el-form label-width="120px">
                        <el-form-item label="药品名称">
                            <el-input v-model="pojo.medicineName"></el-input>
                        </el-form-item>
                        <el-form-item label="药品规格">
                            <el-input v-model="pojo.specification"></el-input>
                        </el-form-item>
                        <!-- 图片上传代码 ****-->
                        <el-form-item label="药品图片">
                            <el-upload
                                    class="avatar-uploader"
                                    action="/upload/oss?folder=medicine"
                                    :show-file-list="false"
                                    :on-success="handleAvatarSuccess"
                                    :before-upload="beforeAvatarUpload">
                                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                        <el-form-item label="药品库存">
                            <el-input-number v-model="pojo.nums" @change="handleChange" :min="1" ></el-input-number>
                        </el-form-item>
                        <el-form-item label="药品单价">
                            <el-input v-model="pojo.price"></el-input>
                        </el-form-item>
                        <el-form-item label="生产厂商">
                            <el-input v-model="pojo.vendor"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="save()">保存</el-button>
                            <el-button @click="formVisible = false">关闭</el-button>
                        </el-form-item>
                    </el-form>
                </el-dialog>
            </div>
        </div>
    </div>

</div>
</body>
<script src="/js/vue.js"></script>
<script src="/js/axios.js"></script>
<script src="/js/elementui.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                tableData: [],
                currentPage: 1,
                total: 10,
                size: 10,
                searchMap: {},
                pojo: {},
                formVisible: false,
                imageUrl: '',
                restaurants: [],
                loading: true,
                activeIndex: '1'
            }
        },
        created() {
            this.fetchData();
        },
        methods: {
            fetchData() {
                axios.post(`/medicine/findMedicine?page=${this.currentPage}&size=${this.size}`, this.searchMap).then(response => {
                    this.tableData = response.data.records;
                    this.total = response.data.total;
                    this.loading = false;
                });
                axios.get(`/medicine/findMedicine`).then(response => {
                    this.restaurants = response.data;
                    this.restaurants = JSON.parse(JSON.stringify(this.restaurants).replace(/medicineName/g, "value"));
                    // alert(JSON.stringify(this.restaurants));
                });
            },
            save() {
                this.pojo.image = this.imageUrl; //如页面有图片上传功能放开注释${this.pojo.medicineId == null ? 'add' : 'update'}
                axios.post(`/medicine/saveOrUpdate`, this.pojo).then(response => {
                    this.fetchData(); //刷新列表
                    this.formVisible = false;//关闭窗口
                });
            },
            edit(medicineId) {
                this.formVisible = true; // 打开窗口
                // 调用查询
                axios.get(`/medicine/findById?id=${medicineId}`).then(response => {
                    this.pojo = response.data;
                    this.imageUrl = this.pojo.image //显示图片  如页面有图片上传功能放开注释
                })
            },
            dele(medicineId) {
                this.$confirm('确定要删除此记录吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.get(`/medicine/delete?id=${medicineId}`).then(response => {
                        this.fetchData(); //刷新列表
                    });
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            querySearch(queryString, cb) {
                var restaurants = this.restaurants;
                var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            createFilter(queryString) {
                // 通过药品名称查询
                return (restaurant) => {
                    return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
                };
            },
            handleSelect(item) {
                console.log(item);
            },
            tableRowClassName({row, rowIndex}) {
                if (rowIndex % 2 === 0) {
                    return 'warning-row';
                } else if (rowIndex % 2 === 1) {
                    return 'success-row';
                }
                return '';
            },
            handleChange(value) {
                console.log(value);
            },
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            /*****图片上传相关代码  如页面有图片上传功能放开注释 *****/
            handleAvatarSuccess(res, file) {
                this.imageUrl = file.response;
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            }
        },
        // 加载数据
        // mounted() {
        //     this.restaurants = this.loadAll();
        // }
    })
</script>
</html>